<template>
    <div class="home-box" ref="homeBox">
        <div>
            <!-- 轮播图  借助于swiper插件实现 -->
            <div class="swiper-container swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <!-- 商品分类 -->
            <!-- <GoodsBar class="goods-box"></GoodsBar> -->
            <HotBar class="hot-box" :types="goodTypes"></HotBar>
            <!-- 分割线1 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>超实惠直达</p>
            </div>
            <!-- 实惠直达分类 -->
            <!-- <div class="shihui-box">               
            </div> -->
            <ShihuiBar :types="shihuiTypes"></ShihuiBar>
            <!-- 分割线2 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>热门分类</p>
            </div>
            <!-- 热门分类 -->
            <HotBar class="hot-box" :rowNum="4" :types="hotTypes"></HotBar>
            <!-- 分割线3 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>猜你喜欢</p>
            </div>
            <!-- 猜你喜欢分类 -->
            <LikeBar class="like-box" :types="likeTypes"></LikeBar>
        </div>
    </div>
</template>
<script>
import GoodsBar from "../components/goodsBar";
import HotBar from "../components/hotBar";
import LikeBar from "../components/likeBar";
import ShihuiBar from "../components/shihuiBar";

import BScroll from "better-scroll";
export default {
    components: {
        GoodsBar,
        HotBar,
        LikeBar,
        ShihuiBar
    },
    data(){
        return{
            goodTypes:[],
            hotTypes:[],
            shihuiTypes:[],
            likeTypes:[]
        }
    },
    methods: {
        initSwiper() {
            // 装载轮播图js代码
            var mySwiper = new Swiper(".swiper-container", {
                autoplay: true,
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: ".swiper-pagination"
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            });
        },
        initScroll(){
            var scroll=new BScroll(this.$refs.homeBox,{
                click:true,//better-scroll插件中默认关闭了容器页面的点击事件
                pullDownRefresh:true
            });
            scroll.on("pullingDown",()=>{
                console.log("袁天罡");
                scroll.finishPullDown();
            })
        },
        loadHotData(){
            this.$api.loadMutigetData({
                appPlat:"m",
                pids:"106930,51836,51833",
                callbackQuery:"callback"
            }).then((data)=>{
                // console.log(data);
                this.goodTypes=data["106930"].list;
                this.hotTypes=data["51836"].list;
                this.shihuiTypes=data["51833"].list;
            }).catch(this.$error);
            // }).catch(this.$showErrorTip);
            // }).catch(showErrorTip);
        },
        loadLikeData(){
            this.$api.loadSearchData({
                pid:"9750",
                sort:"pop",
                cKey:46
            }).then((result)=>{
                // console.log(result);
                this.likeTypes=result.wall.docs;
            }).catch(this.$error);
        }
    },
    mounted() {
        this.initSwiper();
        this.initScroll();
        this.loadHotData();
        this.loadLikeData();
    }
};
</script>
<style lang="less" scoped>
//首页样式
.home-box {
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
//轮播图样式
.swiper {
    width: 100%;
    height: 4rem;
    // margin-top: 1rem;
    img {
        width: 100%;
        height: 100%;
    }
    > .swiper-button-prev,
    .swiper-button-next {
        &:focus {
            outline: none;
        }
    }
}
//商品分类样式
.goods-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
//分割线样式
.line-box {
    text-align: center;
    padding: 0.2rem 0.2rem 0 0.2rem;
    box-sizing: border-box;
    // position: absolute;
    width: 100%;
    height: 0.85rem;
    p {
        position: relative;
        top: -0.45rem;
        left: 0rem;
        font-size: 0.35rem;
        font-weight: bold;
    }
}
//热门分类样式
.hot-box {
    display: flex;
    flex-flow: row wrap;
}
//猜你喜欢分类样式
.like-box {
    display: flex;
    flex-flow: row wrap;
}
</style>